import React, { Component } from 'react'
import './index.css'
import {
  HomeOutlined,
  UserOutlined
} from '@ant-design/icons';

export default class Tabbar extends Component {
  state = {
    HomeIcon: {
      color: "red"
    },
    UserIcon: {
      color: '#000'
    }
  }
  render () {
    return (
      <div id="Tabbar">
        <div className="content">
          <HomeOutlined style={this.state.HomeIcon} className="TabIcon" />
          <span style={this.state.HomeIcon} className="iconName" onClick={() => this.handleClick('首页')}>首页</span>
        </div>
        <div className="content">
          <UserOutlined style={this.state.UserIcon} className="TabIcon" />
          <span style={this.state.UserIcon} className="iconName" onClick={() => this.handleClick('我的')}>我的</span>
        </div>
      </div>
    )
  }
  // 样式切换
  handleClick = (title) => {
    title === "首页" ? this.setState({ HomeIcon: { color: 'red' } }) : this.setState({ HomeIcon: { color: '#000' } })
    title === "我的" ? this.setState({ UserIcon: { color: 'red' } }) : this.setState({ UserIcon: { color: '#000' } })
    this.props.parent.getTabbar(title)
  }
}
